<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图书管理页面</title>
    <!-- shortcut icon导入ico图标 -->
    <link rel="shortcut icon" href="image/favicon.ico" />
    <!-- stylesheet导入css文件 -->
    <link rel="stylesheet" href="css/index.css" />
    <!-- 导入vue框架 -->
    <script src="js/vue.js"></script>
    <!-- 导入饿了么框架 -->
    <script src="js/index.js"></script>
    <!-- 导入axios异步框架 -->
    <script src="js/axios.min.js"></script>

    <script src="js/request.js"></script>
  </head>

  <body>
    <div id="app">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="书本名称" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>价格: {{ scope.row.price }}</p>
              <p>出版社: {{ scope.row.press }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="press" label="出版社"></el-table-column>
        <el-table-column prop="typeName" label="图书分类" width="100">
          <template slot-scope="scope">
            <el-tag :type="selectType(scope.row.type_id)" disable-transitions
              >{{scope.row.typeName}}</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="230">
          <template slot-scope="scope">
            <el-button type="primary" plain size="mini" @click="handleAdd"
              >添加</el-button
            >
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        @close="resetData"
        top="0px"
        title="添加图书"
        :visible.sync="dialogFormVisible"
      >
      <el-form
      :rules="rules"
      :model="bookForm"
      ref="bookForm"
      label-width="80px"
    >
      <el-col>
        <el-form-item label="图书分类" prop="type_id">
          <el-select
            v-model="bookForm.type_id"
            placeholder="请选择图书分类"
          >
            <el-option label="教材" :value="1"></el-option>
            <el-option label="小说" :value="2"></el-option>
            <el-option label="绘本" :value="3"></el-option>
            <el-option label="科学" :value="4"></el-option>
            <el-option label="童话" :value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="图书名称" prop="name">
          <el-input v-model="bookForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="作者" prop="author">
          <el-input v-model="bookForm.author" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="价格" prop="price">
          <el-input v-model="bookForm.price" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="出版社" prop="press">
          <el-input v-model="bookForm.press" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="save"
        >保存</el-button
      >
    </div>
      </el-dialog>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        // 页面初始化创建vue的时候自动就会执行的事件
        created() {
          this.list();
        },
        data() {
          return {
            bookForm: {
              id: null,
              type_id: null,
              name: null,
              author: null,
              press: null,
              price: null,
            },
            dialogFormVisible: false, // 控制弹出的窗口是否显示
            tableData: null,
            rules: {
              type_id: [
                {
                  required: true,
                  message: "请选择图书分类",
                  trigger: "change",
                },
              ],
              name: [
                { required: true, message: "请输入图书名称", trigger: "blur" },
              ],
              author: [
                { required: true, message: "请输入图书作者", trigger: "blur" },
              ],
              press: [
                { required: true, message: "请输入出版社", trigger: "blur" },
              ],
              price: [
                { required: true, message: "请输入价格", trigger: "blur" },
              ],
            },
          };
        },
        methods: {
          save() {
            this.$refs["bookForm"].validate((valid) => {
              if (valid) {
                var url = "book/save";
                if (this.bookForm.id) {
                  url = "book/update";
                }
                http.post(url, this.bookForm).then((resp) => {
                  if (resp == 1) {
                    this.list(); // 查询后台数据
                    this.dialogFormVisible = false; // 关闭添加窗口
                    app.$message({
                      showClose: true,
                      message: "操作成功!",
                      type: "success",
                    });
                  }
                });
              } else {
                return false;
              }
            });
          },
          resetData() {
            this.$refs["bookForm"].resetFields();
            this.bookForm.type_id = null;
            this.bookForm.name = null;
            this.bookForm.author = null;
            this.bookForm.press = null;
            this.bookForm.price = null;
            this.bookForm.id = null;
          },
          list() {
            http
              .get("book/list")
              .then(function (response) {
                app.tableData = response;
              })
              .catch(function (error) {});
          },
          handleEdit(index, row) {
            this.dialogFormVisible = true;
            this.bookForm.id = row.id;
            this.bookForm.type_id = row.type_id;
            this.bookForm.name = row.name;
            this.bookForm.author = row.author;
            this.bookForm.price = row.price;
            this.bookForm.press = row.press;
          },
          handleDelete(index, row) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                http.get("book/delete/" + row.id).then((response) => {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.list(); // 查询最新数据
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除",
                });
              });
          },
          handleAdd() {
            this.dialogFormVisible = true;
          },
          selectType(typeId) {
            if (typeId == 1) return "primary";
            if (typeId == 2) return "success";
            if (typeId == 3) return "info";
            if (typeId == 4) return "warning";
            if (typeId == 5) return "danger";
          },
        },
      });
    </script>
  </body>
</html>
